<template>
	<view class="my-search-container">
		<uni-search-bar :value="value" class="my-search-bar" v-if="isShowInput" :radius="100"
			:bgColor="config.backgroundColor" :placeholder="placeholderText" @confirm="onSearch" @focus="onFocus"
			@blur="onBlur" @clear="onClear" @cancel="onCancel" @input="onInput">
			<uni-icons type="clear" slot="clearIcon" color="#999999"></uni-icons>
		</uni-search-bar>
		<view class="my-search-box" v-else :style="{
		        height: config.height + 'px',
		        backgroundColor: config.backgroundColor,
		        border: config.border
		      }">
			<image class="icon" :src="config.icon" />
			<text class="placeholder" :style="{
		          color: config.textColor
		        }">{{ placeholderText }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search",

		props: {
			value: {
				type: String,

			},
			isShowInput: {
				type: Boolean,
				default: false
			},
			config: {
				type: Object,
				default: () => ({
					height: 36,
					backgroundColor: '#ffffff',
					icon: '/static/images/search.png',
					textColor: '#454545',
					border: '1px solid #c9c9c9'
				})
			},
			placeholderText: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 点击搜索按钮触发
			onSearch() {
				this.$emit('search', this.value)
			},
			// 输入框获取焦点触发
			onFocus() {
				this.$emit('focus', this.value)
			},
			// 输入框失去焦点触发
			onBlur() {
				this.$emit('blur', this.value)
			},
			// 点击输入框中的清空按钮
			onClear() {
				this.$emit('clear', this.value)
			},
			// 点击取消按钮触发
			onCancel() {
				this.$emit('cancel', this.value)
			},
			// value 改变时触发
			onInput(val) {
				this.$emit('input', val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-search-container {
		display: flex;
		align-items: center;

		.my-search-bar {
			width: 100%;
		}

		.my-search-box {
			height: 36px;
			width: 100%;
			background-color: $uni-bg-color;
			border-radius: 15px;
			border: 1px solid $uni-border-color;
			display: flex;
			align-items: center;
			padding: 0 $uni-spacing-row-base;

			.icon {
				width: $uni-img-size-sm;
				height: $uni-img-size-sm;
			}

			.placeholder {
				font-size: $uni-font-size-sm;
				margin-left: $uni-spacing-row-sm;
				color: $uni-text-color-placeholder;
			}
		}
	}
</style>
